
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>志愿者服务</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!--    <link href="css/bootstrap.min.css" rel="stylesheet">-->
    <!--    <link href="css/index.css" rel="stylesheet">-->
    <!--    <script src="js/jquery-3.2.1.min.js"></script>-->
    <!--    <script src="js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" media="all">
    <link rel="stylesheet" th:href="@{/bootstrap/css/index.css}">
    <script th:src="@{/bootstrap/js/jquery-3.2.1.min.js}" charset="UTF-8"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<header class="container-fluid">
    <br />
    <div class="row;layui-bg-red">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- 指定商标和开关的样式，让它在手机上更好的显示-->
                <div class="navbar-header">
                    <!--开关按钮-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="glyphicon glyphicon-th-list" style="color: white"></span>
                    </button>
                    <a class="navbar-brand" href="#">志愿者服务</a>
                </div>

                <!-- 下拉菜单，表单等-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">个人信息<span class="sr-only">(current)</span></a></li>
                        <li><a href="/newslist">今日头条</a></li>
                        <li><a href="/login/login">援助信息</a></li>
                        <li><a href="login">请求援助</a></li>
                        <li><a href="login">志愿文化</a></li>
                        <li><a th:href="@{/learntheory}">学习理论</a></li>
                        <li><a href="#">志愿论坛</a></li>
                        <li><a href="#">学习新思想</a></li>
                        <li><a href="/selectDonation">爱心捐款</a></li>
                        <li><a href="/enterExam">志愿者考核</a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button href="https://pc.xuexi.cn/points/login.html?ref=https%3A%2F%2Fwww.xuexi.cn%2F" type="submit" class="btn btn-default">搜索</button>
                        <!--                        <a href="/login/" target="_self"><button type="button" class="btn btn-success">登录</button></a>-->
                        <!--                        <a href="/login/" target="_self"><button type="button" class="dropdown">登录</button></a>-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">登录<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/login/">用户登录</a></li>
                            <li><a href="https://www.baidu.com/">管理员登录</a></li>
                        </ul>
                        <!--                        <li class="dropdown">-->
                        <!--                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>-->
                        <!--                            <ul class="dropdown-menu">-->
                        <!--                                <li><a href="#">Action</a></li>-->
                        <!--                                <li><a href="#">Another action</a></li>-->
                        <!--                                <li><a href="#">Something else here</a></li>-->
                        <!--                                <li role="separator" class="divider"></li>-->
                        <!--                                <li><a href="#">Separated link</a></li>-->
                        <!--                            </ul>-->
                        <!--                        </li>-->
                    </form>
                </div>
            </div>
        </nav>
    </div>

    <!--第四行：轮播图-->
    <div class="row">
        <div id="carousel-example-generic" data-interval="2000" class="carousel slide" data-ride="carousel">
            <!-- 中间的小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- 包含图片 -->
            <div class="carousel-inner" role="listbox">
                <!--每个div是一张图片-->
                <div class="item active">
                    <img src="/img/banner_001.png" width="100%">
                </div>
                <div class="item">
                    <img src="/img/banner_002.png" alt="..." width="100%">
                </div>
                <div class="item">
                    <img src="/img/banner_003.png" alt="..." width="100%">
                </div>
            </div>

            <!-- 控制按钮 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</header>
<div class="container">

    <div class="row">
        <div class="jx_top">
            <img src="/img/news2.png" width="30" height="30">今日头条
        </div>
    </div>
    <div class="row"  >
        <br />
            <div class="col-md-3" th:each="news:${news}">
                <div class="thumbnail">
                    <a th:href="@{/newsdetail/}+${news.id}"> <img th:src="@{${news.img}}" width="200" height="200" alt="..."></a>
                    <div class="caption">
                        <a th:href="@{/newsdetail/}+${news.id}"><p align="center">[[${news.title}]]</p></a>
                    </div>
                </div>
            </div>
    </div>


</div>
<br>
<footer class="container-fluid">
    <div class="row company">
        富强、民主、文明、和谐，自由、平等、公正、法治，爱国、敬业、诚信、友善
    </div>
    <div class="row company">
        国家富强、民族振兴、人民幸福
    </div>
</footer>


</body>
</html>
